<template>
  <table class="table table-striped table-hover table-sm">
    <thead>
      <tr>
        <th>中文名</th>
        <th class="d-none d-md-table-cell">First/Last Name</th>
        <th>VIP</th>
        <th class="d-none d-md-table-cell">性别</th>
        <th class="d-none d-md-table-cell">生日</th>
        <th class="d-none d-md-table-cell">国籍</th>
        <th class="d-none d-md-table-cell">证件</th>
        <th class="d-none d-md-table-cell">Email</th>
        <th class="d-none d-md-table-cell">手机</th>
        <th>公司</th>
        <th class="d-none d-md-table-cell">部门</th>
        <th>职级</th>
        <th class="d-none d-md-table-cell">备注</th>
        <th class="d-none d-md-table-cell">最新购买时间</th>
        <th class="d-none d-md-table-cell">最后更新时间</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr
        v-for="(info, index) in dataList"
        :key="index"
        @click.stop="showDetail(info.id)"
      >
        <td>{{ info.nameCn }}</td>
        <td class="d-none d-md-table-cell">
          {{ info.firstName }}/{{ info.lastName }}
        </td>
        <td>
          <span class="text-danger" v-if="info.vipLevel > 0">{{
            info.vipLevel
          }}</span>
        </td>
        <td class="d-none d-md-table-cell">{{ getGenderDesc(info.gender) }}</td>
        <td class="d-none d-md-table-cell">{{ info.birthday }}</td>
        <td class="d-none d-md-table-cell">{{ info.nationality }}</td>
        <td class="d-none d-md-table-cell">
          <template v-for="(idInfo, index) in info.idInfos">
            <template v-if="index > 0"><br /></template>
            <span>{{ showIdTypeDesc(idInfo.idType) }}: {{ idInfo.idNo }}</span>
          </template>
        </td>
        <td class="d-none d-md-table-cell">{{ info.email }}</td>
        <td class="d-none d-md-table-cell">{{ info.mobile }}</td>
        <td>
          {{ showCustomerName(info) }}
        </td>
        <td class="d-none d-md-table-cell">
          <template v-if="info.department !== null">
            {{ info.department.name }}
          </template>
        </td>
        <td>
          <template v-if="info.position !== null">
            {{ info.position.name }}
          </template>
        </td>

        <td class="d-none d-md-table-cell">{{ info.remark }}</td>
        <td class="d-none d-md-table-cell">
          <span v-if="info.latestBuyCount > 0">
            {{ info.recency }}({{ info.latestBuyCount }}次)
          </span>
        </td>
        <td class="d-none d-md-table-cell">
          <span v-if="info.lastUpdate === null">{{ info.createTime }}</span>
          <span v-else>{{ info.lastUpdate }}</span>
        </td>

        <td>
          <i class="mdi mdi-arrow-right fa-2"></i>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { showIdTypeDesc, showCustomerName } from "@/common/common.js";
export default {
  props: {
    dataList: {
      type: Array,
    },
  },
  methods: {
    showDetail: function (id) {
      this.$router.push("/h5/passenger/" + id);
    },
    getGenderDesc: function (val) {
      if (val === 1) {
        return "男";
      } else if (val === 2) {
        return "女";
      } else {
        return "";
      }
    },
    showIdTypeDesc: function (idType) {
      return showIdTypeDesc(idType);
    },
    showCustomerName: function (info) {
      return showCustomerName(info);
    },
  },
};
</script>